<template>
  <div style="padding: 20px">
    <div style="width: 100%;margin-bottom: 30px">
      <span style="font-size: 17px;padding-left: 30px">{{ place }}号桌 - 结算单：</span>
    </div>
    <div>
      <el-table :data="statementDetailList" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180">
          <template v-slot="{row}">
            <span>{{ row.id ? row.name : '**' + row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量" width="80"/>
        <el-table-column prop="amount" label="单价"/>
      </el-table>
    </div>
    <div v-if="isAddDetail">
      <el-row
        style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: start;margin-top: 20px;column-gap: 2px"
      >
        <el-col :span="6">
          <el-input v-model="addDetailForm.name" placeholder="名称"/>
        </el-col>
        <el-col :span="3">
          <el-input v-model="addDetailForm.number" type="number" placeholder="数量" input-align="center"/>
        </el-col>
        <el-col :span="4">
          <el-input v-model="addDetailForm.amount" type="number" placeholder="单价" class="input-add-detail"/>
        </el-col>
        <el-col :span="5" style="height: 100%;display: flex;align-items: center;justify-content: end">
          <span>实收金额调整为：</span>
        </el-col>
        <el-col :span="4">
          <el-input v-model="updatePayAmount" type="number" placeholder="实收金额"/>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small" @click="AddDetailhandle">
            完成
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div style="display: flex;flex-direction: column;gap: 10px;padding-left: 30px;margin-top: 20px">
            <span style="margin-bottom: 10px">应收金额：<span style="font-size: 12px;color: red">￥</span><span
              style="color: red;font-size: 18px"
            >{{ dialogStatement.amount }}</span></span>
      <span style="margin-bottom: 10px">实收金额：<span style="font-size: 12px;color: red">￥</span><span
        style="color: red;font-size: 18px"
      >{{ dialogStatement.payAmount }}</span></span>
      <div>
        <span style="margin-top:10px">支付方式：</span>
        <el-radio-group v-model="dialogStatement.payMethod" size="small">
          <el-radio-button
            v-for="item in payMethodList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <span style="margin-top:10px">备注：</span>
      <el-input v-model="dialogStatement.remark" type="textarea" style="width: 100%"/>
      <span style="margin-top:10px">说明：名称前面带**的是调整项，每个结算单只能有一个调整项</span>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>
